<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="width: 2100px; height: 1300px;"></div>
<!--<script type="text/javascript" src="js/echarts.min.js"></script>-->
<!--<script type="text/javascript" src="js/echarts-gl.min.js"></script>-->
<script type="text/javascript" src="http://10.134.216.95:8233/gis/js/echarts.min.js"></script>
<script type="text/javascript" src="http://10.134.216.95:8233/gis/js/echarts-gl.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var option;

    var hours = ['建设分公司','南京','苏州','无锡','徐州','常州','镇江','扬州','泰州','南通','盐城','淮安','宿迁','连云港'];
    var days = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
    var data = [[1,4,4],[2,4,1],[3,4,1],[4,4,3],[5,4,4],[6,4,6],[7,4,4],[8,4,4],[9,4,3],[10,4,3],[11,4,2],[12,4,5]];
    option = {
        tooltip: {},
        visualMap: {
            max: 20,
            inRange: {
                // color: ['#a2c6e7', '#a0e79b', '#dedb92', '#7ca1e7', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                color: ['#7ca1e7']
            }
        },
        xAxis3D: {
            type: 'category',
            data: hours,
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#fdfcfc',//线的颜色
                    // width:'0'//坐标线的宽度
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    // interval: 0,
                    fontSize: 30,
                    color: '#f5b487',//坐标值得具体的颜色
                }
            }
        },
        yAxis3D: {
            type: 'category',
            data: days,
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#fdfcfc',//线的颜色
                    // width:'0'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    // interval: 0,
                    fontSize: 20,
                    color: '#f5b487',//坐标值得具体的颜色
                }
            }
        },
        zAxis3D: {
            type: 'value',
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#fdfdfd',//线的颜色
                    // width:'0'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 20,
                    color: '#f5b487',//坐标值得具体的颜色
                }
            }
        },
        grid3D: {
            boxWidth: 200,
            boxDepth: 80,
            viewControl: {
                //旋转角度
                beta:0,
            },
            light: {
                main: {
                    intensity: 1.2,
                    shadow: true
                },
                ambient: {
                    intensity: 0.3
                }
            },
        },
        series: [{
            type: 'bar3D',
            data: data.map(function(item) {
                return {
                    value: [item[0], item[1], item[2]],
                }
            }),
            shading: 'lambert',
            label: {
                fontSize: 16,
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20,
                    color: '#10e273',
                },
                itemStyle: {
                    color: '#1ae2d2'
                }
            },
        }]
    }

    if(option && typeof option === 'object') {
        myChart.setOption(option);
    }
</script>
</body>

</html>
